<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>首页</title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="../css/base.css"/>
	<style type="text/css">
		/* css of now page */
		.db-movie-list li .main_img{
			max-width: 1.2rem;
			width: 1.2rem;
			height: auto;
		}
		.db-movie-list li .title{
			font-size: 16px;
			font-weight: normal;
		}
		.db-movie-list li p{
			color: #AAAAAA;
		}
		.db-movie-list li p span{
			color: #FF0000;
			display: inline;
			padding-left: 5rpx;
		}
	</style>

</head>
<body>
	<!-- header title -->
	<header class="mui-bar mui-bar-nav">
		<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
		<h1 class="mui-title">热映</h1>
	</header>
	<div class="mui-content" id="app">
		<!-- search -->
		<div class="mui-input-row mui-search">
			<input type="search" class="mui-input-clear" placeholder="电影/电视剧/影人">
		</div>
		
		<!-- 图文列表 -->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<ul class="mui-table-view mui-table-view-chevron db-movie-list">
					
					<li class="mui-table-view-cell mui-media" v-for="item in movies" :key="item.id" @tap="lookDetail(item.id)">
						<a class="mui-navigate-right">
							<img class="mui-media-object mui-pull-left main_img" :src="item.images.large">
							<div class="mui-media-body">
								<h3 class="title">{{item.title}}</h3>
								<p class='mui-ellipsis'>{{item.genres}}<span>{{item.rating.average}}</span></p>
								<p class='mui-ellipsis'>导演：{{item.directors2}}</p>
								<p class='mui-ellipsis'>主演：{{item.casts2}}</p>
							</div>
						</a>
					</li>
					
				</ul>
			</div>
		</div>
	</div>
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue.js"></script>
	
	<script type="text/javascript" charset="utf-8">
		
		mui.init();
		let moviesDeatil;
		mui.plusReady(function () {
		    
			moviesDeatil = plus.webview.getWebviewById('mDeatil');
			if(!moviesDeatil){
				//	预加载(新建窗口)
				moviesDeatil = mui.preload({
					url: '../pages/moviesDeatil.html',	//	将页面加载到窗口
					id: 'mDeatil'	//	设置窗口id
				})
			}
		})
		
		let APP = new Vue({
			el:"#app",
			data:{
				movies:[],	//	列表数据
				nowPage:1,	//	当前页
				count:10,	//	每页数量
			},
			methods:{
				lookDetail(id){	//	影片id
					mui.fire(moviesDeatil,'getMovie',{mid:id})
					
					//	新建/打开窗口 参数可以是页面路径(新建窗口)、id(显示窗口)
					mui.openWindow({
						// url: '../pages/moviesDeatil.html'
						id:	'mDeatil'
					})
				}
			}
		})
		
	  	mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					style:'circle',
					callback: pulldownRefresh
				},
				up: {
					auto:true,
					contentrefresh: '正在加载...',
					contentnomore: '没有更多了...',
					callback: pullupRefresh
				}
			}
		});
	
		function pulldownRefresh(){
			//	location.reload();	//	刷新
			
			// 重置页码为1
			APP.nowPage = 1;
			
			// 更改数组，清空数组
			APP.movies = [];
			
			// 调用上拉加载函数
			pullupRefresh();
			
			//	刷新完成，结束刷新样式
			mui('#pullrefresh').pullRefresh().endPulldown();
			//	重置上拉加载
			mui('#pullrefresh').pullRefresh().refresh(true);
		}
				
		function pullupRefresh(){
			// 请求豆瓣电影接口
			mui.getJSON('http://t.yushu.im/v2/movie/in_theaters',{
				start:(APP.nowPage-1)*APP.count,
				count:APP.count,
				city:'广州',
				apikey: '0df993c66c0c636e29ecbb5344252a4a',
			},function(data){	//json对象
				//服务器返回响应，根据响应结果，分析是否登录成功；
				// console.log(JSON.stringify(data));		// 输出json字符串进行调试
				let subjects = data.subjects;
				if(subjects.length>0){
					//	对部分数据进行转换
					subjects.map((v)=>{
						v.genres = v.genres.join('/');
						
						// 导演名称
						directors = v.directors;
						let arr = [];
						directors.forEach(function(vv){
							// 数组追加
							arr.push(vv.name);  //  ["管虎","xxx"]
						})
						// 增加多一个导演下标
						v.directors2 = arr.join('/');
						
						// 演员名称
						casts = v.casts;
						let arr2 = [];
						casts.forEach(function(vvv){
							arr2.push(vvv.name);
						})
						// 增加多一个演员下标
						v.casts2 = arr2.join('/');
						
					})
				
					// 赋值
					APP.movies = APP.movies.concat(subjects);
					APP.nowPage++;
				}
				// 允许/禁止上拉加载
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(!subjects.length>0);
				
			},function(xhr,type,errorThrown){
				//异常处理；
				console.log(type);
			});
		}
	</script>
</body>
</html>